<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
    <style>
        table {
            border-collapse: separate;
            table-layout: fixed;
            width: 90%;
            empty-cells:hide;
            word-break:break-all;
            text-align: center;
        }
       /* border-collapse: separate：设置表格的边框为分离模式，这意味着表格单元格的边框不会合并。
        table-layout: fixed：固定表格布局，列宽是根据表格的宽度和列宽属性来决定的，不会根据内容调整。
        width: 90%：设置表格宽度为其父容器宽度的90%。
        empty-cells: hide：隐藏空的单元格（即没有内容的 <td> 或 <th>）。
       word-break: break-all：强制长单词在行尾断行，以避免超出单元格边界。
       text-align: center：将表格中的文本居中对齐。
*/

        table  caption{
            caption-side: bottom;
        }

        table  tr :nth-child(2n) {
            background-color: #B6B6B6;
        }

/*
        caption-side: bottom：将表格标题（<caption>）放置在表格底部
        background-color: #B6B6B6：将这些偶数列的背景颜色设置为灰色（#B6B6B6）。*/

    </style>

</head>

<body>
<table border="1">
    <caption>

        季度统计表

    </caption>

    <tr>

        <td>年份</td>

        <td>第一季度</td>

        <td>第二季度</td>

        <td>第三季度</td>

    </tr>

    <tr>

        <td>2014</td>

        <td>100</td>

        <td>200</td>

        <td>30000000000000000</td>

    </tr>

    <tr>

        <td>2015</td>

        <td>150</td>

        <td>250</td>

        <td>350</td>

    </tr>

    <tr>

        <td>2016</td>

        <td>200</td>

        <td>300</td>

        <td></td>

    </tr>

</table>

</body>



</html>